<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位转换工具 - 在线工具集合</title>
    <script src="../utils/toast.js"></script>
    <link rel="stylesheet" href="../utils/styles.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            color: #fff;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            position: relative;
            z-index: 2;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
        }

        .converter-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .converter-type {
            margin-bottom: 40px;
            background: rgba(255, 255, 255, 0.03);
            padding: 20px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .converter-type .select-group {
            margin-bottom: 0;
        }

        .converter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .converter-group {
            background: rgba(255, 255, 255, 0.03);
            padding: 25px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .converter-group::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .converter-group:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .converter-group:hover::before {
            opacity: 1;
        }

        .converter-group label {
            display: block;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1em;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .converter-group input {
            width: 100%;
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            -moz-appearance: textfield;
            cursor: text;
            position: relative;
            z-index: 3;
        }

        .converter-group input::-webkit-outer-spin-button,
        .converter-group input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .converter-group input:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
            background-color: rgba(255, 255, 255, 0.08);
        }

        .converter-group input[readonly] {
            background: rgba(255, 255, 255, 0.03);
            cursor: default;
        }

        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }

        .action-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            color: #1a1a1a;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
            letter-spacing: 0.5px;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
        }

        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: #00ff88;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .back-link:hover {
            transform: translateX(-5px);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px 10px;
            }

            .header h1 {
                font-size: 2em;
            }

            .action-buttons {
                flex-direction: column;
            }

            .action-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="../index.html" class="back-link">← 返回首页</a>
        
        <div class="header">
            <h1>单位转换工具</h1>
            <p>支持多种单位之间的快速转换</p>
        </div>

        <div class="converter-section">
            <div class="converter-type">
                <div class="select-group">
                    <label>选择转换类型</label>
                    <div class="custom-select">
                        <select id="converterType">
                            <option value="length">长度</option>
                            <option value="area">面积</option>
                            <option value="weight">重量</option>
                            <option value="temperature">温度</option>
                            <option value="speed">速度</option>
                            <option value="time">时间</option>
                            <option value="digital">数字存储</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="converter-grid">
                <div class="converter-group">
                    <label>从</label>
                    <div class="custom-select">
                        <select id="fromUnit"></select>
                    </div>
                    <input type="number" id="fromValue" value="1" step="any" placeholder="输入数值" autocomplete="off" min="-999999999" max="999999999">
                </div>
                <div class="converter-group">
                    <label>到</label>
                    <div class="custom-select">
                        <select id="toUnit"></select>
                    </div>
                    <input type="number" id="toValue" placeholder="转换结果" readonly>
                </div>
            </div>

            <div class="action-buttons">
                <button class="action-btn" onclick="swapUnits()">交换单位</button>
                <button class="action-btn" onclick="copyResult()">复制结果</button>
            </div>
        </div>
    </div>

    <script>
        // 单位定义
        const units = {
            length: {
                name: '长度',
                units: [
                    { name: '米', symbol: 'm', factor: 1 },
                    { name: '厘米', symbol: 'cm', factor: 0.01 },
                    { name: '毫米', symbol: 'mm', factor: 0.001 },
                    { name: '千米', symbol: 'km', factor: 1000 },
                    { name: '英里', symbol: 'mi', factor: 1609.34 },
                    { name: '英尺', symbol: 'ft', factor: 0.3048 }
                ]
            },
            area: {
                name: '面积',
                units: [
                    { name: '平方米', symbol: 'm²', factor: 1 },
                    { name: '平方厘米', symbol: 'cm²', factor: 0.0001 },
                    { name: '平方千米', symbol: 'km²', factor: 1000000 },
                    { name: '公顷', symbol: 'ha', factor: 10000 },
                    { name: '亩', symbol: '亩', factor: 666.67 }
                ]
            },
            weight: {
                name: '重量',
                units: [
                    { name: '千克', symbol: 'kg', factor: 1 },
                    { name: '克', symbol: 'g', factor: 0.001 },
                    { name: '毫克', symbol: 'mg', factor: 0.000001 },
                    { name: '磅', symbol: 'lb', factor: 0.453592 },
                    { name: '盎司', symbol: 'oz', factor: 0.0283495 }
                ]
            },
            temperature: {
                name: '温度',
                units: [
                    { name: '摄氏度', symbol: '°C', factor: 1 },
                    { name: '华氏度', symbol: '°F', factor: 1 }
                ]
            },
            speed: {
                name: '速度',
                units: [
                    { name: '米/秒', symbol: 'm/s', factor: 1 },
                    { name: '千米/小时', symbol: 'km/h', factor: 0.277778 },
                    { name: '英里/小时', symbol: 'mph', factor: 0.44704 }
                ]
            },
            time: {
                name: '时间',
                units: [
                    { name: '秒', symbol: 's', factor: 1 },
                    { name: '分钟', symbol: 'min', factor: 60 },
                    { name: '小时', symbol: 'h', factor: 3600 },
                    { name: '天', symbol: 'd', factor: 86400 },
                    { name: '周', symbol: 'w', factor: 604800 }
                ]
            },
            digital: {
                name: '数字存储',
                units: [
                    { name: '字节', symbol: 'B', factor: 1 },
                    { name: '千字节', symbol: 'KB', factor: 1024 },
                    { name: '兆字节', symbol: 'MB', factor: 1048576 },
                    { name: '吉字节', symbol: 'GB', factor: 1073741824 },
                    { name: '太字节', symbol: 'TB', factor: 1099511627776 }
                ]
            }
        };

        const converterType = document.getElementById('converterType');
        const fromUnit = document.getElementById('fromUnit');
        const toUnit = document.getElementById('toUnit');
        const fromValue = document.getElementById('fromValue');
        const toValue = document.getElementById('toValue');

        // 更新单位选项
        function updateUnits() {
            const type = converterType.value;
            const unitList = units[type].units;
            
            fromUnit.innerHTML = unitList.map(unit => 
                `<option value="${unit.factor}">${unit.name} (${unit.symbol})</option>`
            ).join('');
            
            toUnit.innerHTML = unitList.map(unit => 
                `<option value="${unit.factor}">${unit.name} (${unit.symbol})</option>`
            ).join('');

            // 设置默认值
            toUnit.selectedIndex = 1;
            fromValue.value = "1"; // 重置输入值为1
        }

        // 转换单位
        function convert() {
            const fromFactor = parseFloat(fromUnit.value);
            const toFactor = parseFloat(toUnit.value);
            const value = parseFloat(fromValue.value);

            if (isNaN(value)) {
                toValue.value = '';
                return;
            }

            let result;
            if (converterType.value === 'temperature') {
                // 温度特殊处理
                if (fromUnit.selectedIndex === 0) { // 从摄氏度到华氏度
                    result = (value * 9/5) + 32;
                } else { // 从华氏度到摄氏度
                    result = (value - 32) * 5/9;
                }
            } else {
                result = value * fromFactor / toFactor;
            }

            toValue.value = result.toFixed(6);
        }

        // 交换单位
        function swapUnits() {
            const temp = fromUnit.value;
            fromUnit.value = toUnit.value;
            toUnit.value = temp;
            convert();
        }

        // 复制结果
        function copyResult() {
            if (!toValue.value) {
                toast.warning('请先输入要转换的数值');
                return;
            }
            
            navigator.clipboard.writeText(toValue.value).then(() => {
                toast.success('已复制转换结果');
            }).catch(() => {
                toast.error('复制失败，请重试');
            });
        }

        // 监听事件
        converterType.addEventListener('change', updateUnits);
        fromUnit.addEventListener('change', convert);
        toUnit.addEventListener('change', convert);
        fromValue.addEventListener('input', convert);
        fromValue.addEventListener('change', convert);
        fromValue.addEventListener('keyup', convert);

        // 初始化
        updateUnits();
        convert(); // 初始化时执行一次转换
    </script>
</body>
</html> 